<template>
    <div class="content">
        <van-nav-bar :title="shopInfo.name" left-text="返回" left-arrow @click-left="handleBack" />
        <div class="header">
            <img :src="assetsUrl + foodList[0].imageUrl" alt="" class="bussinessFood">
            <div class="businessInfo">
                <div class="left">
                    <div class="title">{{ shopInfo.name }}</div>
                    <div class="infos">
                        <span class="vote">5.0分</span>
                        <span>商家配送约35分钟</span>
                        <span style="margin-left: 5px;">月售1000+</span>

                    </div>
                </div>
                <div class="right">
                    <img :src="assetsUrl + shopInfo.imgUrl" alt="" class="bussinessImg">
                </div>
            </div>
        </div>
        <div class="main">
            <van-icon name="shopping-cart-o" class="shopCar" v-if="!showPop" @click="showPop = !showPop" />
            <van-popup v-model="showPop" position="bottom" :style="{ height: '40%' }">
                <div class="foodInfoList">
                    <div class="foodItem" v-for="(item, index) in chooseList">
                        <div class="left">
                            <img :src="assetsUrl + item.imageUrl" alt="">
                        </div>
                        <div class="middle">
                            <div class="name">{{ item.name }}</div>
                            <div class="taste">{{ item.taste[item.tasteIndex] }}</div>
                            <div class="price">￥{{ item.price }}</div>
                        </div>
                        <div class="right">
                            <!-- <div class="jian" @click="handleChange('0', item)">-</div>
                            <div class="val">{{ item.num }}</div>
                            <div class="jia" @click="handleChange('1', item)">+</div> -->
                        </div>
                    </div>
                </div>
            </van-popup>

            <div class="itemList">
                <div class="item" v-for="(item, index) in itemList" :key="index" @click="handleBusiness(item)"
                    :class="{ 'activeItem': item.value === activeItem }">
                    {{ item.label }}</div>
            </div>
            <div class="orderContent" v-if="activeFlag == '0'">
                <div class="left">
                    <div class="caterogyItem" :class="{
                        activeCategory: item.value == activeCateGory
                    }" v-for="(item, index) in cateGoryList" :key="index" @click="handleCateGory(item)">{{ item.label
                        }}</div>
                </div>

                <div class="right">
                    <div class="foodList">
                        <div class="foodItem" :class="{ last: index == foodList.length - 1 }"
                            v-for="(item, index) in foodList" :key="index">

                            <div class="info">

                                <div class="left">
                                    <img :src="assetsUrl + item.imageUrl" alt="">
                                </div>
                                <div class="right infos">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="vote">
                                        <span class="sales">销量:{{ item.sales }}</span>
                                        <span class="good">好评率:{{ item.good }}%</span>

                                    </div>
                                    <div class="goods">{{Math.floor(Math.random(0,5,1)*100) }}人觉得价格实惠</div>
                                    <div class="edit">
                                        <span class="price">￥{{ item.price }}</span>
                                        <div class="editBtn" @click="handleSwitchFood(item)">选规格</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="orderContent evaluate" v-else-if="activeFlag == '1'">
                <div class="evaluateList">
                    <div class="item" v-for="(item, index) in evalutaeList" :key="index">
                        <div class="info">
                            <img :src="item.img" alt="">
                            <div class="details">
                                <span class="name">{{ item.name }}</span>
                                <span class="date">{{ item.date }}</span>
                            </div>
                        </div>
                        <van-rate v-model="item.value" readonly :color="'#ff4932'" />
                        <div class="evalute">{{ item.evalute }}</div>
                    </div>
                </div>
            </div>
        </div>

        <van-submit-bar v-if="activeFlag == '0'" :price="total" button-text="提交订单" @click.passive="test"
            @submit="onSubmit" />
        <van-dialog v-model="showFood" :title="curFoodInfo.label" class="dialogOrder">
            <div class="foodSwitch">
                <div class="item-content">
                    <span class="text">份量</span>
                    <div class="text-item">
                        <span class="one">1份</span>
                        <span class="price">￥{{ curFoodInfo.price }}</span>
                    </div>
                </div>
                <div class="item-content">
                    <span class="text">口味</span>
                    <div class="tasteContent">
                        <div class="taste-item" :class="{
                            activeTaste: item === activeTaste
                        }" v-for="(item, index) in curFoodInfo.taste" @click="handlerTaste(item, index, curFoodInfo)">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="editContent">
                    <div class="price">
                        总计:
                        <span class="priceVal">￥{{ curFoodInfo.price }}</span>
                    </div>
                    <div class="btn" @click="handleAdd(curFoodInfo)">+加入购物车</div>
                </div>
                <div class="close" @click="handlseClose">
                    <van-icon name="cross" />
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { getShopInfo, getGoodsList, getEvaluateList } from '@/api/reception';
import { Toast } from 'vant';
export default {
    data() {
        return {
            showPop: false,
            assetsUrl: '',
            shopInfo: {},
            dishesId: '',
            total: 0,
            chooseList: [],
            activeTaste: '香辣',
            evalutaeList: [
                {
                    name: '胡图图',
                    evaluate: '很好吃',
                    img: 'http://himg.bdimg.com/sys/portrait/item/public.1.1d19d749.alfq7KvC-bCh3wdZG7JKcA.jpg',
                    date: '2024-12-1',
                    value: '7.8'
                }, {
                    name: '胡图图',
                    evaluate: '很好吃',
                    img: 'http://himg.bdimg.com/sys/portrait/item/public.1.1d19d749.alfq7KvC-bCh3wdZG7JKcA.jpg',
                    date: '2024-12-1',
                    value: '7.8'

                }, {
                    name: '胡图图',
                    evaluate: '很好吃',
                    img: 'http://himg.bdimg.com/sys/portrait/item/public.1.1d19d749.alfq7KvC-bCh3wdZG7JKcA.jpg',
                    date: '2024-12-1',
                    value: '7.8'

                }, {
                    name: '胡图图',
                    evaluate: '很好吃',
                    img: 'http://himg.bdimg.com/sys/portrait/item/public.1.1d19d749.alfq7KvC-bCh3wdZG7JKcA.jpg',
                    date: '2024-12-1',
                    value: '7.8'
                }, {
                    name: '胡图图',
                    evaluate: '很好吃',
                    img: 'http://himg.bdimg.com/sys/portrait/item/public.1.1d19d749.alfq7KvC-bCh3wdZG7JKcA.jpg',
                    date: '2024-12-1',
                    value: '7.8'
                },
            ],
            curFoodInfo: {
                label: '雪碧',
                id: '1',
                sales: '200+',
                good: '96',
                price: '3.00',
                taste: ['香辣', '麻辣', '孜然']
            },
            showFood: false,
            activeItem: '点餐',
            activeFlag: '0',
            itemList: [
                {
                    flag: '0',
                    label: '点餐',
                    value: '点餐'
                },
                {
                    flag: '1',
                    label: '评价',
                    value: '评价'
                },
                // {
                //     flag: '2',
                //     label: '商家',
                //     value: '商家'
                // }
            ],
            cateGoryList: [
                {
                    label: '饮料',
                    value: '饮料'
                },
                {
                    label: '主食',
                    value: "主食"
                }
            ],
            activeCateGory: '',
            foodList: [
                {
                    name: '雪碧',
                    id: '1',
                    sales: '200+',
                    good: '96',
                    price: '3.00',
                    taste: ['香辣', '麻辣', '孜然']
                }, {
                    name: '雪碧',
                    id: '1',
                    sales: '200+',
                    good: '96',
                    price: '3.00',
                    taste: ['香辣', '麻辣', '孜然']

                }, {
                    name: '雪碧',
                    id: '1',
                    sales: '200+',
                    good: '96',
                    price: '3.00',
                    taste: ['香辣', '麻辣', '孜然']

                },
            ]
        };
    },

    created() {
        this.dishesId = this.$route.query.dishesId;
        this.assetsUrl = process.env.VUE_APP_ASSETSURL

        this.getShopInfo()
    },

    methods: {

        async getGoodsList() {
            let data = {
                categoryName: this.activeCateGory,
                businessId: this.shopInfo.id
            }
            const res = await getGoodsList(data)
            this.foodList = res.data.map(item => {
                return {
                    ...item,
                    sales: Math.floor(Math.random() * 100 + 200),
                    good: Math.floor(Math.random(90, 100) * 100),
                    taste: item.taste?.split(',')

                }
            })

        },
        async getShopInfo() {
            let data = {
                dishesId: this.dishesId

            }
            let res = await getShopInfo(data)
            this.shopInfo = res.data.business
            console.log(this.shopInfo, 'shopInfo');

            this.cateGoryList = res.data.categoryNameList.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
            this.cateGoryList.unshift({
                label: '全部',
                value: ''
            })
            this.foodList = res.data.disheList.map(item => {
                return {
                    ...item,
                    sales: Math.floor(Math.random() * 100 + 200),
                    good: Math.floor(Math.random(90, 100) * 100),
                    taste: item.taste?.split(',')
                }
            })
            const evaluateRes = await getEvaluateList({ businessId: this.shopInfo.id })
            console.log(evaluateRes, 'evaluateRes');
            this.evalutaeList = evaluateRes.data.map(item => {
                return {
                    name: item.updateName,
                    date: item.createTime,
                    value: ((item.packageScore * 1 + item.score * 1 + item.tasteScore * 1) / 3).toFixed(1),
                    evalute: item.comment,
                    img: this.assetsUrl + item.avatar
                }
            })
            console.log(this.evalutaeList, 'evalutaeList');
            
        },
        test() {
            console.log('1');

        },
        handleCateGory(v) {
            this.activeCateGory = v.value
            this.getGoodsList()
        },
        handleBack() {
            this.$router.push('/orderHome')
            // this.$router.back()

        },
        handleAdd(item) {
            console.log(typeof item.tasteIndex, item);

            if (typeof item.tasteIndex != 'number') {
                Toast.fail('请选择口味！');
                return
            }
            this.chooseList.push(item)
            this.total += item.price * 100
            this.showFood = false
            this.activeTaste = ''
            delete this.curFoodInfo.tasteIndex
        },
        handleBusiness(item) {
            this.activeFlag = item.flag;
            this.activeItem = item.value;
        },
        handleSwitchFood(item) {

            console.log(item);

            this.curFoodInfo = item
            this.showFood = true
        },
        handlerTaste(item, index) {
            console.log(item);
            this.activeTaste = item
            this.curFoodInfo.tasteIndex = index
        },
        handlseClose() {
            this.activeTaste = ''
            delete this.curFoodInfo.tasteIndex
            this.showFood = false
            this.curFoodInfo = {}
        },
        onSubmit() {
            if (this.chooseList.length === 0) {
                Toast.fail('请选择菜品！');
                return
            }
            this.$router.push({
                path: '/orderHome/submitOrder', query: {
                    chooseList: this.chooseList,
                    shopInfo: this.shopInfo
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
.content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
        height: 150px;
        position: relative;

        .bussinessFood {
            width: 100%;
            height: 150px;
        }

        .businessInfo {
            width: 80%;
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translate(-50%);
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            border-radius: 5px;

            img {
                width: 60px;
                height: 60px;
            }

            .left {
                flex: 1;
                height: 60px;
                display: flex;
                flex-direction: column;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 12px;
                }

                .infos {
                    display: flex;

                    span {
                        font-size: 14px;
                    }

                    .vote {
                        color: #FF4932;
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    .main {
        background-color: #fff;
        flex: 1;
        display: flex;
        flex-direction: column;

        .foodInfoList {
            padding: 15px;
        }

        .foodItem {
            display: flex;
            margin-bottom: 15px;

            .left {
                margin-right: 10px;

                img {
                    width: 80px;
                }
            }

            .middle {
                flex: 1;

                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .name {
                    font-size: 18px;
                    font-weight: 600;
                }

                .price {
                    font-size: 20px;
                    color: #ff3e14;
                }
            }

            .right {
                display: flex;
                align-items: center;
                width: 30%;
                justify-content: flex-end;
                padding-right: 15px;

                .jian,
                .jia {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 20px;
                    height: 20px;
                    border: 1px solid #eee;
                    border-radius: 3px;
                    color: red;
                }

                .val {
                    margin: 0px 5px;
                }
            }
        }

        .shopCar {
            position: absolute;
            font-size: 16px;
            bottom: 8px;
            left: 10px;
            z-index: 99999999999;

            &::before {
                font-size: 32px;
            }
        }

        .itemList {
            display: flex;
            border-bottom: 1px solid #eee;
            padding-top: 50px;

            .item {
                width: 80px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #333;
            }

            .activeItem {
                border-radius: 20px;
                background-color: #FF4932;
                color: #fff;
            }
        }

        .evaluate {
            background-color: #f5f5f5 !important;
            padding: 10px;

            .evaluateList {
                width: 100%;
                display: flex;
                flex-direction: column;

                .item {
                    background-color: #fff;
                    margin-bottom: 20px;
                    border-radius: 10px;
                    padding: 10px;

                    .info {
                        display: flex;

                        img {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }

                        .details {
                            display: flex;
                            flex-direction: column;

                            .name {
                                font-size: 22px;
                            }

                            .date {
                                font-size: 14px;
                                color: #333;
                            }

                        }

                    }

                    .evalute {
                        margin-top: 10px;
                        padding: 5px;
                        font-size: 16px;
                        color: #333;
                        background-color: #f5f5f5;
                    }
                }
            }
        }

        .orderContent {
            width: 100%;
            flex: 1;
            display: flex;

            .left {
                width: 100px;
                // background-color: #f8fafb;
                background-color: #f5f5f5;

                .caterogyItem {
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background-color: #f8fafb;

                }

                .activeCategory {
                    background-color: #fff;
                }
            }

            .right {
                flex: 1;
                overflow-y: auto;

                .foodList {
                    overflow-y: auto;
                    height: calc(100vh - 290px);


                }

                .last {
                    margin-bottom: 50px;
                }

                .foodItem {

                    .info {
                        display: flex;
                        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
                        margin-bottom: 15px;
                        padding: 10px;

                        .left {
                            width: 100px;
                            margin-right: 10px;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .infos {
                            flex: 1;
                            display: flex;
                            flex-direction: column;

                            .name {
                                color: black;
                                font-size: 16px;
                                font-weight: 700;
                                margin-bottom: 3px;
                            }

                            .vote {
                                display: flex;

                                span {
                                    color: #c7c7c7;
                                    font-size: 14px;
                                }

                                .sales {
                                    margin-right: 8px;
                                }
                            }

                            .goods {
                                border: 1px solid #FF4932;
                                color: #FF4932;
                                width: 96%;
                                margin: 5px 0;
                            }

                            .edit {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                .price {
                                    font-weight: 700;
                                    color: black;
                                    font-size: 22px;
                                }

                                .editBtn {
                                    width: 70px;
                                    height: 30px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 15px;
                                    background-color: #FF4932;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

            }
        }

    }

    .dialogOrder {
        padding: 10px;

        ::v-deep {
            .van-dialog__header {
                padding: 0;
                color: black;
                font-weight: 600;
                margin-bottom: 20px;
                font-size: 24px;

            }

            .van-dialog__footer {
                display: none
            }

            .foodSwitch {
                display: flex;
                flex-direction: column;
                position: relative;

                .item-content {
                    margin-bottom: 10px;
                    font-weight: 600;
                    font-size: 18px;

                    .text-item {
                        width: 150px;
                        height: 50px;
                        font-size: 18px;
                        font-weight: normal;
                        border: 1px solid #FF4932;
                        color: #FF4932;
                        background-color: #fffdf1;
                        border-radius: 5px;
                        display: flex;
                        padding: 10px;

                        .one {
                            width: 60%;
                        }
                    }

                    .taste-item {
                        padding: 10px;
                    }

                    .tasteContent {
                        display: flex;
                        flex-wrap: wrap;

                        .taste-item {
                            border: 1px solid #999;

                            margin-right: 10px;
                            border-radius: 5px;

                        }

                        .activeTaste {
                            border: 1px solid #FF4932;
                            color: #FF4932;
                            background-color: #fffdf1;
                        }
                    }
                }

                .editContent {
                    display: flex;
                    align-items: center;
                    margin-top: 30px;

                    .price {
                        font-size: 16px;
                        color: black;
                    }

                    .priceVal {
                        font-size: 24px;
                        color: #FF4932;
                    }

                    .btn {
                        margin-left: auto;
                        height: 30px;
                        border-radius: 5px;
                        background-color: #FF4932;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }

                .close {
                    background-color: red;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%);
                }
            }
        }

    }
}
</style>